<!--
- Author:  LiShibin.
- Date:    2017/7/12 0012.
- File:    detail.
-->
<template>
  <div>
    <div class="Web_Box3">
      <div class="Topmenu">
        <i @click="$utils.back" class="iconfont icon-youjiantou"><a href=""></a></i>
        <h1>订单详情</h1>
        <span></span>
      </div>
      <div class="f-oh" style="margin-top:50px;">
        <div class="ddxqtop">
          <div v-if="orderInfo.order_info.order_state == $dictionary.orderStatus.cancle" style="line-height:1.14rem;font-size: 16px;padding-left: 20px;font-weight: bold;color: #333;">订单已取消</div>
          <template v-else>
            <p class="hengxian"></p>
            <ul>
              <li>
                <span ></span>
                <p>提交订单</p>
              </li>
              <li>
                <span :class="{'ddxqon': orderInfo.order_info.order_state == $dictionary.orderStatus.unpay}"></span>
                <p  :class="{'ddxqwzon': orderInfo.order_info.order_state == $dictionary.orderStatus.unpay}">待付款</p>
              </li>
              <li>
                <span :class="{'ddxqon': orderInfo.order_info.order_state == $dictionary.orderStatus.payed}"></span>
                <p :class="{'ddxqwzon': orderInfo.order_info.order_state == $dictionary.orderStatus.payed}">待发货</p>
              </li>
              <li>
                <span :class="{'ddxqon': orderInfo.order_info.order_state == $dictionary.orderStatus.sended}"></span>
                <p :class="{'ddxqwzon': orderInfo.order_info.order_state == $dictionary.orderStatus.sended}">待收货</p>
              </li>
              <li>
                <span :class="{'ddxqon': orderInfo.order_info.order_state == $dictionary.orderStatus.recevied}"></span>
                <p :class="{'ddxqwzon': orderInfo.order_info.order_state == $dictionary.orderStatus.recevied}">已完成</p>
              </li>
            </ul>
          </template>
        </div>
        <div class="ddxq_spxinxi" style="margin-top: 0.43rem;">
          <div class="shouhangwenzi">商品信息</div>
          <div class="ddxq_spxinxi_dingdanxq">
            <ul>
              <li v-for="(item, index) in orderInfo.order_info.extend_order_goods" class="  bor_1_f8">
                <div class="f-oh f-pr  pb50" @click="gotoGoodsDetail(item.goods_commonid)">
                  <p>
                    <span class="ddxq_spxinxi_tp" style="background: #fff;text-align: center">
                      <img :src="$config.website + '/test.php?sign=' + index + '&image=' + item.goods_image" style="width: auto">
                    </span>
                  </p>
                  <p class="ddxq_spxinxi_spmz">{{item.goods_name}}</p>
                  <span class="ddxq_spxinxi_spbq">9.5新未使用</span>
                  <span class="ddxq_spxinxi_dingdanxqjiage ddon">￥{{item.goods_price}}</span>
                  <span style="position: absolute;top: 74%;right: 2px;transform: translateY(-50%);">×{{item.goods_num}}</span>
                </div>
                <span @click="gotoReturnService(item.goods_id)" class="return_botton" v-show="orderInfo.order_info.order_state == $dictionary.orderStatus.sended || orderInfo.order_info.order_state == $dictionary.orderStatus.payed">退换</span>
                <span style="width: 3.1rem" @click="gotoReturnService(item.goods_id)" class="return_botton" v-show="orderInfo.order_info.order_state == $dictionary.orderStatus.recevied">申请售后</span>
              </li>
            </ul>
            <div class="ddxq_spxinxi_zy">
              <p>合计 <span class="fr zhuse">￥{{orderInfo.order_info.goods_amount}}</span></p>
              <p>配送方式 <span class="fr zhuse">平台免邮</span></p>
              <p>优惠券 <span class="fr zhuse">-￥{{orderInfo.order_info.coupon_amount || 0}}</span></p>
              <!--<p>发票 <span class="fr zhuse">本次不开具发票</span></p>-->
            </div>
          </div>
        </div>
        <div class="ddxq_spxinxi">
          <div class="shouhangwenzi">收货人信息</div>
          <div class="ddxq_spxinxi_shouhuorenxinxi">
            <p>{{orderInfo.reciver_name}}&nbsp;&nbsp;{{orderInfo.add_list.mob_phone}}</p>
            <p>{{orderInfo.add_list.area}} {{orderInfo.add_list.address}}</p>
          </div>
        </div>
        <div class="ddxq_spxinxi">
          <div class="shouhangwenzi">订单信息</div>
          <div class="ddxq_spxinxi_dd">
            <p><span> 订单号</span>{{orderInfo.order_info.order_sn}}</p>
            <p><span>下单时间</span>{{orderInfo.order_info.add_time | timestampToDate}}</p>
            <p><span>支付方式</span>{{orderInfo.order_info.payment_name}}</p>
            <p><span>订单状态</span>{{orderInfo.order_info.state_desc}}</p>
          </div>
        </div>
      </div>
      <div @click="pay" v-if="orderInfo.order_info.order_state == $dictionary.orderStatus.unpay" class="ddxq_btn">支付</div>


    </div>

  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import {MessageBox} from 'mint-ui'
  import payPop from '../../components/payPop'

  export default {
    mixins: [
      mapModules({bankList: 'bankList'}),
      mapRules({need: 'bankList'})
    ],
    data() {
      return {
        id: this.$route.params.id,
        self: this.$route.query.self != 'false', // 是否是本人的订单
        orderInfo: {add_list: {}, order_info: {extend_order_common: {}, extend_order_goods: {}}},
        autoRecevieTimeRemain: {days: 0, hours: 0, minutes: 0, seconds: 0},
        payTimeRemain: {days: 0, hours: 0, minutes: 0, seconds: 0},
        payTimeRemainInterval: null,
        refundState: ''
      }
    },
    components: {},
    created() {
      this.getOrderInfo(this.id)
//      this.getAutoReceiveTimeRemain()
    },
    beforeDestroy() {
      clearInterval(this.payTimeRemainInterval)
    },
    computed: {
      integralGet: function () {
        return parseInt((this.orderInfo.order_info.order_amount - this.orderInfo.order_info.coupon_amount) * 0.05)
      },
      orderTimeout: function () {
        if (this.autoRecevieTimeRemain.days < 0 || this.autoRecevieTimeRemain.hours < 0 || this.autoRecevieTimeRemain.minutes < 0 || this.autoRecevieTimeRemain.seconds < 0) {
          return true
        }
        return false
      },
      payTimeout: function () {
        if (this.payTimeRemain.days < 0 || this.payTimeRemain.hours < 0 || this.payTimeRemain.minutes < 0 || this.payTimeRemain.seconds < 0) {
          clearInterval(this.payTimeRemainInterval)
          return true
        }
        return false
      }
    },
    methods: {
      gotoReturnService(goods_id) {
        // console.log(this.bankList.data[0].account_name)
        // this.$toast(this.bankList.data[0])
        if (!this.bankList.data[0]) {
          this.$router.push({name: 'member-bank'})
          this.$toast('请先绑定银行卡')
          return
        }
        // this.$toast('功能尚未开放')
        this.$request.refundState(this.id, goods_id).then(data => {
          this.refundState = data
          if (this.refundState == '1') {
            this.$router.push({name: 'after-sale', params: {id: this.id, goods_id: goods_id, order_sn: this.orderInfo.order_info.order_sn}})
          } else {
            this.$router.push({name: 'return-service-refund', params: {id: this.id, goods_id: goods_id, order_sn: this.orderInfo.order_info.order_sn}})
          }
        }).catch(e => {
          this.$toast('请求失败')
        })
      },
      gotoGoodsDetail(id) {
        this.$router.push({name: 'goods-detail', params: {id: id}})
      },
      gotoRefundGoodsList(orderId, goodsId) {
        this.$router.push({name: 'refund-goods-list', params: {orderId: orderId, goodsId: goodsId}})
      },
      gotoRefundMoneyList(id) {
        this.$router.push({name: 'refund-list', query: {type: 1}})
      },
      gotoRefundGoodsDetail(id) {
        this.$router.push({name: 'refund-goods-detail', params: {id: id}})
      },
      addRefundGoods(orderId, goodsId, is_return_over) {
        console.log(is_return_over)
        if (is_return_over == '1') {
          this.$messageBox.alert('升级前所下订单（2018年7月31日17：00前）如需换货，请联系商城客服（4000770591）为您操作。由此带来的不便，敬请谅解。')
        } else {
          this.$router.push({name: 'refund-goods-add', params: {orderId: orderId, goodsId: goodsId}})
        }
      },
      addRefundMoney(orderId, goodsId) {
        this.$router.push({name: 'refund-money-add', params: {orderId: orderId, goodsId: goodsId}})
      },
      gotoOrderExpress(id) {
        this.$router.push({name: 'order-express', params: {id: id}})
      },
      addComment(id) {
        this.$router.push({name: 'comment-add', params: {id: id}})
      },
      getOrderInfo(id) {
        this.$request.getOrderInfo(id).then(data => {
          // if (data.order_info.coupon_amount > 0) {
          // let usedCouponGoodsTotalMoney = 0
          // for (let i = 0; i < data.order_info.extend_order_goods.length; i++) {
          //   if (data.order_info.extend_order_goods[i].is_coupon == '1') {
          //     usedCouponGoodsTotalMoney += parseFloat(data.order_info.extend_order_goods[i].goods_price) * data.order_info.extend_order_goods[i].goods_num
          //   }
          // }
          // for (let i = 0; i < data.order_info.extend_order_goods.length; i++) {
          //   if (data.order_info.extend_order_goods[i].is_coupon == '1') {
          //     data.order_info.extend_order_goods[i].couponMoney = (data.order_info.extend_order_goods[i].goods_price * data.order_info.extend_order_goods[i].goods_num / usedCouponGoodsTotalMoney * data.order_info.coupon_amount).toFixed(2)
          //   }
          // }
          // }
//          data.order_info.order_state = this.$dictionary.orderStatus.sended
//          data.order_info.shipping_time = 1499908975 // 1500085375
          this.orderInfo = data
//          if (data.order_info.order_state == this.$dictionary.orderStatus.sended) { // 已发货，计算剩余自动收货时间
//            this.getAutoReceiveTimeRemain(data.shipping_time)
//          }
          if (data.order_info.order_state == this.$dictionary.orderStatus.unpay) { // 已发货，计算剩余自动收货时间
            this.getPayTimeRemain(data.order_info.add_time)
            clearInterval(this.payTimeRemainInterval)
            this.payTimeRemainInterval = setInterval(() => {
              this.getPayTimeRemain(data.order_info.add_time)
            }, 1000)
          }
        }).catch(e => {
          this.$toast('获取订单明细失败:' + e.msg)
        })
      },
      getAutoReceiveTimeRemain(shippingTimeTamp) {
        if (shippingTimeTamp) {
          let currentTime = new Date()
          let shippingStartTime = new Date()
          shippingStartTime.setTime(shippingTimeTamp * 1000)
          let shippingEndTime = new Date(shippingStartTime)
          shippingEndTime.setDate(shippingStartTime.getDate() + 7)
          this.autoRecevieTimeRemain = this.$utils.timeDif(currentTime, shippingEndTime)
        }
      },
      getPayTimeRemain(orderTimeTamp) {
        if (orderTimeTamp) {
          let currentTime = new Date()
          let orderTime = new Date()
          orderTime.setTime(orderTimeTamp * 1000)
          let payEndTime = new Date(orderTime.getTime() + 1000 * 60 * 30)
          this.payTimeRemain = this.$utils.timeDif(currentTime, payEndTime)
        }
      },
      cancleOrder(id) {
        MessageBox.confirm(`你确定要取消订单吗?`).then(action => {
          this.$request.cancleOrder(id).then(data => {
            this.$toast('取消订单成功')
            this.$router.go(-1)
          }).catch(e => {
            this.$toast('取消订单失败:' + e.msg)
          })
        }).catch(() => {
        })
      },
      confirmReceived() {
        this.$request.confirmReceived(this.id).then(data => {
          this.$toast('确认收货成功')
          this.$router.go(-1)
        }).catch(e => {
          this.$toast('确认收货失败:' + e.msg)
        })
      },
      pay() {
        let paySn = this.orderInfo.order_info.pay_sn
        payPop({paySn: paySn, orderId: this.orderInfo.order_info.order_id})
      }
    }
  }
</script>

<style>

</style>
